<template>
  <div>
    <ListContainer title="参团详情"
                   resource-uri="group/participation-detail"
                   resource-name="participation_detail"
                   :params="fetchParams"
                   v-on:fetched="onFetched">

      <div slot="items">
        <el-table
          :data="items"
          border
          style="width: 100%">
          <el-table-column
            prop="id"
            label="ID"
            width="80">
          </el-table-column>
          <el-table-column
            label="参团用户"
            width="100">
            <template scope="prop">
              <el-button type="text" @click="showUser('用户资料', prop.row.user.id)">{{prop.row.user.nickname}}</el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="价格"
            width="100">
            <template scope="scope">
              {{scope.row.price|formatPrice}}
            </template>
          </el-table-column>
          <el-table-column
            width="180"
            label="参团时间">
            <template scope="scope">
              {{scope.row.participation_time|formatDatetime}}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </ListContainer>
    <el-dialog v-bind:title="userView.title" v-model="userView.visible" size="small">
      <div style="width: 100%; overflow: hidden;">
        <User v-bind:user-id="userView.userId"></User>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import ListContainer from '../ListContainer.vue'
  import User from '../User/User.vue'
  import Moment from 'moment'
  export default {
    data () {
      return {
        items: [],
        userView: {
          visible: false,
          title: null,
          userId: null
        }
      }
    },
    props: ['group_id'],
    filters: {
      formatPrice (price) {
        return price + '元'
      },
      formatDatetime (date) {
        return Moment(date, 'X').format('YYYY-MM-DD HH:mm:ss')
      }
    },
    computed: {
      fetchParams () {
        if (this.$router.currentRoute.name === 'group_group.list') {
          return {
            group_id: this.group_id
          }
        } else {
          return {}
        }
      }
    },
    methods: {
      onFetched: function (data) {
        this.items = data
        console.log(data)
      },
      showUser: function (title, userId) {
        console.log(userId)
        this.userView.title = title
        this.userView.userId = userId
        this.userView.visible = true
      }
    },
    components: {
      ListContainer,
      User
    }
  }
</script>
